<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>项目全周期管理-直播</title>
    <script src="../static/js/jquery-2.0.3.min.js"></script>
  <script src="./ezuikit.js"></script>
</head>
<style>
    body{
        text-align: center;
		-webkit-touch-callout:none;  /*系统默认菜单被禁用*/
		-webkit-user-select:none; /*webkit浏览器*/
		-khtml-user-select:none; /*早期浏览器*/
		-moz-user-select:none; /*火狐*/
		-ms-user-select:none;  /*IE10*/
		user-select:none;

    }
    .video{
        width:100%;
    }
	.zoom{

	}
	.button{
        margin: 20px 30px;
        width:40px;
        height:40px;
        line-height: 40px;
        display: inline-block;
    }
	#far{
		background:url("ico/far.png");
		background-size:100%;
	}
	#near{
		background:url("ico/near.png");
		background-size:100%;
	}
    .list{
        display: inline-block;
        /*position: fixed;top:10px;*/
        /*right:20px;*/
        z-index: 999;
        line-height:30px;
        background-color: #000000;
        height: 30px;
        margin-bottom: -5px;
        width: 100%;
        padding: 0px 13px;
    }
    .list div{
        display: inline-block;float: left;color: #ffffff;margin-right:20px;
    }
</style>
<body>

<div class="list">
    <div class="menu" data-deviceSerial="J93489802" data-channelNo="1" data-token="at.abywyzhbap5l6qvk33ljxw6j7n1ka14o-7aw8x70mio-07tn1iz-gzukgwdco" data-id="10">视频一</div>
    <div class="menu" data-deviceSerial="G81391855" data-channelNo="1" data-token="at.abywyzhbap5l6qvk33ljxw6j7n1ka14o-7aw8x70mio-07tn1iz-gzukgwdco" data-id="10">视频二</div>
</div>

<div id="video" class='video'></div>
<div class="zoom">
	<div class='button' id="near"></div>
	<div class='button' id="far"></div>
</div>
</body>
<script>
    $(".list").on("click", ".menu", function() {
        var deviceSerial = $(this).attr("data-deviceSerial");
        var channelNo = $(this).attr("data-channelNo");
        var token = $(this).attr("data-token");
        var id = $(this).attr("data-id");
        window.location.replace("/live/mobileLive.html?url=ezopen://open.ys7.com/"+deviceSerial+"/"+channelNo+".live&accessToken="+token+"&id="+id );
    });


var playr;
var width = window.screen.width;
var height = width*0.73;
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
  .then(response => response.json())
  .then(res => {
    var id = getQueryVariable('id');
    //获取设备数量
    $.ajax({
        type:'post',
        url:"/api/Project/monitorApi",
        data:{id:id},
        dataType:'JSON',
        success:function (res) {
           console.log(res);

            var html = "";
            var deviceSerial = res.deviceSerial;
            var channelNo = res.channelNo;
            var token = res.accessToken;
            var id = res.id;
            $.each(deviceSerial, function (e, v) {
                html += "<div class='menu' data-deviceSerial="+v+" data-channelNo="+channelNo[e]+" data-token="+token+" data-id="+id+" >"+v+"</div>";
            });
            $(".list").html(html);


        },
        error:function (res) {
        }
    });


    var url = res.data.accessToken;
	var accessToken = res.data.accessToken;
    playr = new EZUIKit.EZUIKitPlayer({
      id: 'video', // 视频容器ID
      //accessToken: accessToken,
      //url: 'ezopen://open.ys7.com/J59769746/1.hd.live',//海康测试
	  accessToken: getQueryVariable('accessToken'),
	  url:getQueryVariable('url'),
      template: 'mobileLive', //mobileLive-手机版; simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
      width:width,
      height:height,
    });
  });

//获取URL传参
function getQueryVariable(variable)
{
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i=0;i<vars.length;i++) {
		var pair = vars[i].split("=");

		console.log(pair);

		if(pair[0] == variable){return pair[1];}
	}



	return(false);
}
</script>
</html>